<!--
 * @Author: wangmingshuo
 * @Date: 2020-06-08 17:38:24
 * @LastEditTime: 2020-06-23 16:00:40
 * @FilePath: /myBlogs/myLittleNest/pages/blogs.vue
-->
<template>
	<div class="blogs">
		<section class="top">
			<div class="box">
				<div class="inline-box"></div>
			</div>
		</section>
	</div>
</template>

<script>
export default {
	components: {},
	data() {
		return {
			converter: null,
			html: '',
			text: '',
		};
	},
	created() {},
	mounted() {
		// this.converter = new showdown.Converter();
	},
	methods: {
		change() {
			// this.html = this.converter.makeHtml(this.text);
		},
	},
};
</script>

<style scoped lang="scss">
@keyframes move {
	0%,
	100% {
		// 上右下左   下到上  右到左
		clip: rect(0 220px 2px 0);
	}
	25% {
		clip: rect(0 220px 220px 218px);
	}
	50% {
		clip: rect(218px 220px 220px 0);
	}
	75% {
		clip: rect(0 2px 220px 0);
	}
}
.blogs {
	width: 100%;
	height: 150%;
	background-color: rgba(225, 225, 225, 0.8);
	.top {
		width: 100%;
		height: 600px;
		.box {
			position: relative;
			width: 200px;
			height: 200px;
			background-color: pink;
			margin: 50px auto;
			border-radius: 15px;
			.inline-box {
				position: absolute;
				width: 220px;
				height: 220px;
				left: 0;
				top: 0;
				margin-left: -10px;
				margin-top: -10px;
				border: 2px solid deepskyblue;
				box-sizing: border-box;
				// border-radius: 50%;
				animation: move 5s linear infinite;
			}
		}
	}
}
canvas {
	display: block;
	background: rgb(0, 0, 0);
	background-size: 100% 250%;
	background-position: center bottom;
}
</style>
